<template>
  <div class="position-re loginbg">
    <div class="loginbox">
      <h2 class="fz20 tx-c bb-e0e0e0 ptb20">登录</h2>
      <el-form ref="form" :model="form" :rules="rules" label-width="60px" class="pr20 mt20">
        <el-form-item label="用户" prop="user" label-width="80px">
          <el-input v-model="form.user" placeholder="输入用户"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="80px">
          <el-input v-model="form.password" placeholder="输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="账户类型" prop="type" label-width="80px">
          <el-radio-group v-model="form.type">
            <el-radio label="管理员账户"></el-radio>
            <el-radio label="项目A账户"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button style="width:100%" type="primary" @click="onSubmit('form')">登录</el-button>
        </el-form-item>
         <el-form-item>
           <p class="lh1"><span>管理员账户：admin</span><span class="ml40">账户密码：123456</span></p>
           <p class="lh1"><span> 项目 A 账户： user   </span><span class="ml40"> 账户密码：123456</span></p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form:{
        user:'admin',
        password:'123456',
        type:'管理员账户'
      },
       rules: {
          user: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
    };
  },
  methods:{
    onSubmit(formName){
       this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.form.user=='admin'||this.form.user=='user'){
              if(this.form.user =='user' && this.form.type =='管理员账户'){
                 this.$message('无权限');
              }else{
                sessionStorage.userType = this.form.type
                this.$router.push('/home')
              }
            }else{
              this.$message('无此账号');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
};
</script>

<style lang="less">
.loginbg {
  height: 100%;
  background: url("../../assets/images/bg1.jpg") no-repeat center;
  background-size: cover;
  .loginbox {
    width: 460px;
    height: 400px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}
</style>
